<?php
defined('_JEXEC') or die('Restricted access');
$img_path = JURI::root(true).'/images/fileupload/';
?>
<div class='tab_content' id="tab_list_maloi">
	<div class='container-fluid margin10'>
		<div class='row-fluid'>
			<div class='widget widget-padding span12'>
				<div class='widget-header'>
					<i class="icon-list-alt"></i>
					<h5>Danh sách mã lỗi</h5>
				</div>
				<div class='widget-body'>
					<div class='row-fluid'>
						<div class='span12'>
							<?php if(Utility::checkAccess("core.create", $this->canDo)): ?>
							<a class='btn btn-primary' href='#create_maloi'>
								<i class='icon-plus icon-white'></i>
								<?php echo JText::_("COM_KETNOI_CREATEBTN") ?>
							</a>
							<?php endif; ?>
							<?php if(Utility::isAdmin()): ?>
							<a onclick="showModalPermission('maloi')" class='btn btn-danger'>
								<i class='icon-lock icon-white'></i>
								Phân quyền
							</a>
							<?php endif; ?>
						</div>
					</div>
					
					<div class="row-fluid">
						<div class='span12'>
							<div id='grid_maloi' class='margin10'></div>
						</div>
					</div>
					
				</div>
				
			</div>
		</div>
	</div>
</div>
<script>
    jQuery(document).ready(function(){    
        jQuery("#grid_maloi").kendoGrid({
			dataSource: {
				transport: {
					read:{
						url:"index.php?option=com_ketnoi&view=maloi&tmpl=component",
						dataType:"json"
					}	
				},
				schema: {
					data:"results",
					total:"total"
				},
				pageSize: 10,
				serverPaging: true
			},
			pageable:{
				pageSizes: true,
				messages: {
					display: "{0} - {1} <?php echo JText::_('COM_KETNOI_MESSAGEOF') ?> {2} <?php echo JText::_('COM_KETNOI_MESSAGEDATA') ?>",
					empty: "",
					page: "Page",
					of: "of {0}",
					itemsPerPage: "<?php echo JText::_('COM_KETNOI_MESSAGEITEMPERPAGE') ?>",
					first: "<?php echo JText::_('COM_KETNOI_GOTOFIRSTPAGE') ?>",
					previous: "<?php echo JText::_('COM_KETNOI_GOTOPREVIOUSPAGE') ?>",
					next: "<?php echo JText::_('COM_KETNOI_GOTONEXTPAGE') ?>",
					last: "<?php echo JText::_('COM_KETNOI_GOTOLASTPAGE') ?>",
					refresh: "Refresh"	
				}
			},
			scrollable:false,
			autoBind: false,
			detailTemplate: kendo.template($("#template").html()),
			detailInit: detailInit,
			columns: [
                {
					field:"ma",
					title:"<?php echo JText::_('COM_KETNOI_CODE') ?>",
					template:"<a onclick='edit_hash_maloi(${id})'>${ma}</a>"
				},
				{
					field:"ten",
					title:"Tên lỗi"
				},
				{
					title:"",
					template:kendo.template($("#action_tpl").html()),
					width:100
				}
            ],
            dataBound:function(){
				if(this._data.length == 0)
				{
					var colspan = jQuery("#grid_maloi").find('table thead tr th').length;
                    jQuery("#grid_maloi").find('table tbody').append("<tr><td colspan='"+colspan+"'><?php echo JText::_('COM_KETNOI_EMPTYDATA') ?></td></tr>");
				}

				//make column on reponsive
				AddCellLabel("grid_maloi");	
            }
		});
    })
    
    function detailInit(e) {
    	var detailRow = e.detailRow;

        	detailRow.find(".tabstrip").kendoTabStrip({
            	animation: {
            		sopen: { effects: "fadeIn" }
            	}
           });           
	}
</script>

<script type="text/x-kendo-template" id="template">
	<div class="tabstrip">
		<ul>
			<li class="k-state-active">
				Thông tin mã lỗi
            </li>
        </ul>
        <div>
       		<div class="row-fluid">
				<div class='span12'>
					<div class="control-group">
				    	<label class="control-label detailgrid">
				        	Hình ảnh:								
						</label>
					    <div class="controls row-fluid">
							<div id="fileList">
					    	#
								var arr = JSON.parse(hinhanh);
								for(var i = 0;i < arr.length ; i++)
								{
									var img = arr[i];
							#
									
									<div>
										<img class="img-polaroid" src="<?= $img_path ?>#= img #" height="60">
										<img style="display: none;" class="img_tmp" src="<?= $img_path ?>#= img #" height="60">
									</div>
							#
								} 
							# 	 
							</div>          	
					    </div>
				    </div>
				</div>
			</div>

			<div class="row-fluid">
				<div class='span12'>
					<div class="control-group">
				    	<label class="control-label detailgrid">
				        	Ghi chú:								
						</label>
					    <div class="controls row-fluid">
							<span class="detail_grid_info">#= ghichu #</span>          	
					    </div>
				    </div>
				</div>
			</div>
        </div>
        
	</div>

</script>

<script type="text/x-kendo-template" id="action_tpl">
	<div class="btn-group">
		<?php if(Utility::checkAccess("core.edit", $this->canDo)): ?>
  		<a onclick="edit_hash_maloi(#= data.id #)" class="btn btn-info">
			<i class='icon-edit icon-large'></i>
			Sửa
		</a>
		<?php endif; ?>
		<?php if(Utility::checkAccess("core.delete", $this->canDo)): ?>
  		<a onclick="deletemaloi(#= data.id #)" class="btn btn-info">
			<i class='icon-trash icon-large'></i>
			Xóa
		</a>
		<?php endif; ?>
	</div>
</script>